<template>
  <div class="box">
    <van-nav-bar
      title="京东登录"
      left-arrow
      @click-left="onClickLeft"
      />
    <div class="content">
      <van-field v-model="username" placeholder="请输入手机号/邮箱" />
      <van-field v-model="password" class="bott" type="password" placeholder="请输入密码" />
      <!-- 提交按钮 -->
      <van-button round type="info" class="sub" color="#f2270c" @click="login" :disabled="!flag">确定登录</van-button>
      <router-link to="/register" class="register">立即注册</router-link>
      <van-checkbox class="user" icon-size="14px" checked-color="#cccccc" v-model="checked"><span class="userAgreement">同意用户协议</span></van-checkbox>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { Field, NavBar, Button, Checkbox, CheckboxGroup } from 'vant'

Vue.use(NavBar)
Vue.use(Field)
Vue.use(Button)
Vue.use(CheckboxGroup)
Vue.use(Checkbox)

export default {
  data () {
    return {
      username: '',
      password: '',
      checked: true
    }
  },
  computed: {
    flag () {
      return /\d{11}/.test(this.username) && /\d{3}/.test(this.password)
    }
  },
  methods: {
    onClickLeft () {
      this.$router.go(-2)
    },
    async login () { // 请求在状态管理器中
      this.$store.dispatch('loginAction', {
        loginname: this.username,
        password: this.password
      })
      this.$router.push('/home')
    }
  }
}
</script>

<style lang="stylus" scoped>
html
  font-size 20px
.content
  text-align center
.sub
  width 90%
.bott
  margin-bottom .5rem
.register
  position absolute
  top 10rem
  left 50%
  transform translateX(-50%)
.user
  font-size 12px
  color #ddd
  position absolute
  bottom .5rem
  left 50%
  transform translateX(-50%)
.userAgreement
  color #bbb
</style>
